import { nextTick } from "vue";
import loadingCss from "@/styles/loading.scss";

// 定义方法
export const NextLoading = {
  // 载入 css
  setCss: () => {
    let link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = loadingCss;
    link.crossOrigin = "anonymous";
    document.getElementsByTagName("head")[0].appendChild(link);
  },
  // 创建 loading
  start: () => {
    const bodys = document.body;
    const div = document.createElement("div");
    div.setAttribute("class", "loading");
    const htmls = `
    <div class="_1"></div>
    <div class="_2"></div>
    <div class="_3"></div>
    <div class="_4"></div>
    <div class="_1"></div>
    <div class="_4"></div>
    <div class="_2"></div>
    <div class="_3"></div>
    <div class="_1"></div>
		`;
    div.innerHTML = htmls;
    bodys.insertBefore(div, bodys.childNodes[0]);
  },
  // 移除 loading
  done: () => {
    nextTick(() => {
      const el = document.querySelector(".loading");
      el && el.parentNode?.removeChild(el);
    });
  },
};
